<template>
  <view>
    <view class="smart-panel-head">
      <view class="smart-panel-head-title">View视图</view>
    </view>
    <view class="smart-padding-wrap">
      <view>flex-direction:row 横向布局</view>
    </view>
    <view class="smart-flex smart-row">
      <view class="flex-item smart-bg-blue">A</view>
      <view class="flex-item smart-bg-green">B</view>
      <view class="flex-item smart-bg-red">C</view>
    </view>
    <view class="smart-padding-wrap">
      <view>flex-direction:row 纵向布局</view>
    </view>
    <view class="smart-flex smart-column">
      <view class="flex-item-c smart-bg-blue">A</view>
      <view class="flex-item-c smart-bg-green">B</view>
      <view class="flex-item-c smart-bg-red">C</view>
    </view>

    <view>其他布局</view>
    <view>
      <view class="text">纵向布局-自动宽度</view>
      <view class="text" style="width: 300rpx;">纵向布局-固定宽度</view>
    </view>
    <view class="smart-flex smart-row">
      <view class="text">横向布局-自动宽度</view>
      <view class="text">横向布局-自动宽度</view>
    </view>
    <view class="smart-flex smart-row" style="justify-content: center;">
      <view class="text">横向布局-居中</view>
      <view class="text">横向布局-居中</view>
    </view>
    <view class="smart-flex smart-row">
      <view class="text" style="flex: 2;">权重2</view>
      <view class="text" style="flex: 1;">权重1</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style></style>